<template>
  <div class="dialog">
    <el-dialog
      :title="titleText + (formData.sparePartsName || '') + '使用记录'"
      :visible.sync="showDialog"
      width="35%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div
        v-for="item, index in spareHistoryList"
        :key="index"
        class="spare-item"
      >
        <span>使用日期: {{ dateToFormatTwo(item.createTime, 'YYYY年MM月DD日') }}</span>
        <span>使用数量: {{ item.num }}件</span>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          class="cancelbtn"
          @click="cancel()"
        >取 消</el-button>
        <el-button
          type="primary"
          class="savebtn"
          @click="save('ruleForm')"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import sparePartsApi from "@/api/basic-info-manage/spare-parts-manage";
export default {
  name: "",
  components: {},
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: ""
    },
    nowChanceStau: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: false
    },
    editObject: {
      type: [Object],
      default: () => {
        return {};
      }
    }
    // equModelArr: {
    //   type: [Array],
    //   default: () => {
    //     return []
    //   }
    // }
  },
  data() {
    return {
      formData: {},
      equModelArr: [],
      spareHistoryList: [],
      defaultProps: {
        children: "childList",
        value: "equipmentTypeCode",
        label: "equipmentTypeName",
        emitPath: false,
        checkStrictly: true
      },
      rules: {
        sparePartsName: [
          {
            required: true,
            message: "请输入关键字名称",
            trigger: ["change", "blur"]
          }
        ],
        equModelCode: [
          {
            required: true,
            message: "请选择设备型号",
            trigger: ["change", "blur"]
          }
        ]
      },
      showDialog: this.show
    };
  },

  watch: {
    show(v) {
      this.showDialog = v;
    },
    nowChanceStau(v) {
      if (v === "edit") {
        this.formData = this.editObject;
        this.queryHistory(this.editObject.sparePartsCode);
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 关联设备类型，根据父级查询子级
    queryHistory(e) {
      // 获取数据
      sparePartsApi.queryHistory(e).then(res => {
        if (res.code === 1) {
          let data = res.data || [];
          console.log(data);
          this.spareHistoryList = data;

          // this.changeEquipmentTypeCode(this.spareHistoryList[0].children);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    save(formData) {
      this.cancel();
    },
    close() {
      this.$emit("closeDialog");
    },
    cancel() {
      this.$emit("cancelDialog");
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog {
    min-height: 40vh;
    .el-dialog__body {
    min-height:30vh;

    }
  }
}
.spare-item {
  width: 100%;
  padding: 10px 20px;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #000;
  font-size: 18px;
}
</style>
